<template>
  <div>
    <n-spin :show="loading" description="请稍候...">
      <n-drawer v-model:show="showModal" :width="dialogWidth">
        <n-drawer-content>
          <template #header> 生成演示详情 </template>
          <template #footer>
            <n-button @click="showModal = false"> 关闭 </n-button>
          </template>
          <n-descriptions label-placement="left" class="py-2" column="1">
            <n-descriptions-item>
              <template #label>code</template>
              <span v-html="formValue.code"></span
            ></n-descriptions-item>

            <n-descriptions-item>
              <template #label>name</template>
              <span v-html="formValue.name"></span
            ></n-descriptions-item>

            <n-descriptions-item>
              <template #label>成交额</template>
              {{ formValue.turnover }}
            </n-descriptions-item>

            <n-descriptions-item>
              <template #label>日期</template>
              <span v-html="formValue.date"></span
            ></n-descriptions-item>

            <n-descriptions-item>
              <template #label>解读</template>
              <span v-html="formValue.desc"></span
            ></n-descriptions-item>

            <n-descriptions-item>
              <template #label>sell_seat</template>
              {{ formValue.sellSeat }}
            </n-descriptions-item>

            <n-descriptions-item>
              <template #label>buy_seat</template>
              {{ formValue.buySeat }}
            </n-descriptions-item>

            <n-descriptions-item>
              <template #label>最新价</template>
              {{ formValue.lastPrice }}
            </n-descriptions-item>

            <n-descriptions-item>
              <template #label>涨跌幅</template>
              {{ formValue.changePercent }}
            </n-descriptions-item>

            <n-descriptions-item>
              <template #label>流通市值</template>
              {{ formValue.circulatingMarketCap }}
            </n-descriptions-item>

            <n-descriptions-item>
              <template #label>总市值 </template>
              {{ formValue.marketCap }}
            </n-descriptions-item>

            <n-descriptions-item>
              <template #label>换手率 </template>
              {{ formValue.turnoverRate }}
            </n-descriptions-item>

            <n-descriptions-item>
              <template #label>封板资金 </template>
              {{ formValue.fbzj }}
            </n-descriptions-item>

            <n-descriptions-item>
              <template #label>炸板次数</template>
              {{ formValue.zbcs }}
            </n-descriptions-item>

            <n-descriptions-item>
              <template #label>连板次数 </template>
              {{ formValue.lbNumber }}
            </n-descriptions-item>

            <n-descriptions-item>
              <template #label>涨停统计-天数范围</template>
              {{ formValue.ztStatisticsDays }}
            </n-descriptions-item>

            <n-descriptions-item>
              <template #label>涨停统计-涨停天数 </template>
              {{ formValue.ztStatisticsNum }}
            </n-descriptions-item>

            <n-descriptions-item>
              <template #label>所属行业</template>
              <span v-html="formValue.industry"></span
            ></n-descriptions-item>

            <n-descriptions-item>
              <template #label>首次封板时间</template>
              {{ formValue.firstFbTime }}
            </n-descriptions-item>

            <n-descriptions-item>
              <template #label>最后封板时间</template>
              {{ formValue.lastFbTime }}
            </n-descriptions-item>
          </n-descriptions>
        </n-drawer-content>
      </n-drawer>
    </n-spin>
  </div>
</template>

<script lang="ts" setup>
  import { computed, ref } from 'vue';
  import { useMessage } from 'naive-ui';
  import { View } from '@/api/stockZtPool';
  import { State, newState, options } from './model';
  import { adaModalWidth, getOptionLabel, getOptionTag } from '@/utils/hotgo';
  import { getFileExt } from '@/utils/urlUtils';

  const message = useMessage();
  const dialogWidth = ref('75%');
  const loading = ref(false);
  const showModal = ref(false);
  const formValue = ref(newState(null));
  const fileAvatarCSS = computed(() => {
    return {
      '--n-merged-size': `var(--n-avatar-size-override, 80px)`,
      '--n-font-size': `18px`,
    };
  });

  //下载
  function download(url: string) {
    window.open(url);
  }

  function openModal(state: State) {
    adaModalWidth(dialogWidth, 580);
    showModal.value = true;
    loading.value = true;
    View({ id: state.id })
      .then((res) => {
        formValue.value = res;
      })
      .finally(() => {
        loading.value = false;
      });
  }

  defineExpose({
    openModal,
  });
</script>

<style lang="less" scoped></style>
